<!doctype html>

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../web-component-tester/browser.js"></script>
  <script src="../../iron-test-helpers/mock-interactions.js"></script>
  <link rel="import" href="../../test-fixture/test-fixture.html">

  <dom-module id="row-height-grid-styles" theme-for="vaadin-grid">
    <template>
      <style>
        [part~="cell"] {
          border: none !important;
        }
      </style>
    </template>
  </dom-module>

  <link rel="import" href="helpers.html">
  <link rel="import" href="../vaadin-grid.html">
</head>

<body>

  <test-fixture id="two-columns">
    <template>
      <vaadin-grid style="width: 200px; height: 200px;" size="10000" hidden>
        <vaadin-grid-column>
          <template class="header">foo</template>
          <template>foo</template>
        </vaadin-grid-column>
        <vaadin-grid-column>
          <template>foo</template>
        </vaadin-grid-column>
      </vaadin-grid>
    </template>
  </test-fixture>

  <test-fixture id="default-content">
    <template>
      <vaadin-grid style="width: 200px; height: 200px;" size="10000" hidden>
        <vaadin-grid-column>
          <template>
            <div>foobar</div>
          </template>
          <template class="header">foo</template>
        </vaadin-grid-column>
      </vaadin-grid>
    </template>
  </test-fixture>

  <test-fixture id="two-columns-uneven-content">
    <template>
      <vaadin-grid style="width: 200px; height: 200px;" size="10000" hidden>
        <vaadin-grid-column>
          <template>
            <div style="line-height: 2em;">foobar</div>
          </template>
          <template class="header">foo</template>
        </vaadin-grid-column>
        <vaadin-grid-column>
          <template>
            <div style="line-height: 0.5em;">foobar</div>
          </template>
          <template class="header">foo</template>
        </vaadin-grid-column>
      </vaadin-grid>
    </template>
  </test-fixture>

  <script>
    describe('rows', () => {

      let grid, header, rows, defaultHeight, cells;

      function init(fixtureName, cb) {
        grid = fixture(fixtureName);
        listenOnce(grid, 'animationend', () => {
          flushGrid(grid);

          rows = getRows(grid.$.items);
          defaultHeight = getRows(header)[0].clientHeight;

          cells = getRowCells(rows[0]);

          cb();
        });

        requestAnimationFrame(() => {
          grid.dataProvider = infiniteDataProvider;
          grid.hidden = false;
          flushGrid(grid);
          header = grid.$.header;
        });
      }

      it('should have higher cells on each row', done => {
        init('two-columns', () => {
          cells[0].style.height = cells[0].clientHeight * 2 + 'px';
          flush(() => {
            expect(cells[1].clientHeight).to.equal(cells[0].clientHeight);
            done();
          });
        });
      });

      it('should not misalign on resize (wheel)', done => {
        init('default-content', () => {
          scrollToEnd(grid);

          // Simulate a wheel event that doesn't cause a scroll event
          const e = new CustomEvent('wheel', {bubbles: true});
          e.deltaY = -100;
          e.deltaX = 0;
          grid.$.table.dispatchEvent(e);

          // Simulate a (window) resize
          grid.style.width = '200px';
          grid._resizeHandler();

          expect(header.getBoundingClientRect().top).to.be.closeTo(grid.getBoundingClientRect().top, 1);
          done();
        });
      });

      it('should not misalign on reattach', done => {
        init('default-content', () => {
          scrollToEnd(grid);

          const parentNode = grid.parentNode;
          parentNode.removeChild(grid);
          parentNode.offsetHeight;
          parentNode.appendChild(grid);

          setTimeout(() => {
            expect(header.getBoundingClientRect().top).to.be.closeTo(grid.getBoundingClientRect().top, 1);
            done();
          });
        });
      });

      it('should update height when hiding columns', done => {
        init('two-columns-uneven-content', () => {
          grid.querySelectorAll('vaadin-grid-column')[0].hidden = true;

          // Flush row height and position calculations
          flushGrid(grid);

          expect(rows[0].getBoundingClientRect().bottom).to.eql(rows[1].getBoundingClientRect().top);
          done();
        });
      });

    });
  </script>

</body>

</html>
